<template>
  <!-- 上架作业 -->
  <div id="PackingMarking">
    <root name="PackingMarking">
      <SafeHeader
        v-bind="{
          title: '打印标签',
          isBack: true,
          fixedTop: true,
        }"
      />
      <v-tabs fixed-tabs height="40" v-model="tab">
        <v-tab class="wms-tab"> 任务 </v-tab>
        <v-tab class="wms-tab"> 打标 </v-tab>
        <v-tab-item class="task" transition="slide-y-transition">
          <v-container class="task_list white mt-2">
            <v-row>
              <v-col cols="8">
                <v-text-field
                  clearable
                  placeholder="输入物料编码查询"
                  style="height: 50px"
                  v-model="serchData.itemCode"
                >
                </v-text-field>
              </v-col>
              <v-col cols="4">
                <v-btn
                  small
                  dark
                  depressed
                  color="primary"
                  @click="getAcceptData"
                  style="min-width: 100px; height: 45px"
                  >查询</v-btn
                >
              </v-col>
            </v-row>
            <div v-if="acceptList[0]">
              <v-container v-for="(item, index) in acceptList" :key="index">
                <v-row>
                  <v-col cols="12" class="pa-0 pb-2">
                    <v-card outlined style="background-color: #f2f3f5">
                      <v-card-subtitle class="list_content">
                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable">订单号</v-col>
                          <v-col class="py-1 card-value">{{
                            item.asnBillNo
                          }}</v-col>
                        </v-row>

                        <v-row
                          class="
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable"
                            >收货单号</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.acceptRecordCode
                          }}</v-col>
                        </v-row>

                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable"
                            >物料编码</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemCode
                          }}</v-col>
                        </v-row>
                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable"
                            >物料名称</v-col
                          >
                          <v-col class="py-1 card-value">{{
                            item.itemName
                          }}</v-col>
                        </v-row>

                        <v-row
                          class="
                            pa-0
                            d-flex
                            flex-row
                            justify-space-between
                            wms-v-row
                          "
                        >
                          <v-col cols="3" class="py-1 card-lable"> 数量 </v-col>
                          <v-col class="py-1 card-value"
                            >{{ item.packedQuantity }} /
                            {{ item.quantity }}</v-col
                          >
                        </v-row>

                        <v-row align="center">
                          <v-col
                            cols="12"
                            class="
                              py-0
                              mt-2
                              d-flex
                              align-center
                              justify-center
                              font-weight-bold
                            "
                          >
                            <v-btn
                              rounded
                              small
                              color="#193690"
                              dark
                              @click="packing(item)"
                              class="font-weight-bold"
                              style="min-width: 150px; height: 30px"
                              >拆分打标</v-btn
                            >
                          </v-col>
                        </v-row>
                      </v-card-subtitle>
                    </v-card>
                  </v-col>
                </v-row>
              </v-container>
            </div>
            <v-row v-else>
              <v-col cols="12" class="text-center">暂无数据</v-col>
            </v-row>
          </v-container>
        </v-tab-item>
        <v-tab-item transition="slide-y-transition" class="pickingWrap">
          <div>
            <v-container>
              <v-card outlined class="py-4">
                <v-row class="ma-1 mb-4">
                  <v-col class="py-0">
                    <v-text-field
                      label="物料编码"
                      dense
                      required
                      disabled
                      hide-details
                      v-model="formData.itemCode"
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row class="ma-1 mb-4">
                  <v-col class="py-0">
                    <v-text-field
                      label="物料名称"
                      dense
                      required
                      disabled
                      hide-details
                      v-model="formData.itemCode"
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row class="ma-1 mb-5">
                  <v-col class="py-0">
                    <v-text-field
                      label="批次"
                      dense
                      disabled
                      v-model="formData.batchName"
                      hide-details
                    ></v-text-field>
                  </v-col>
                </v-row>

                <v-row class="ma-0 mb-5">
                  <v-col
                    class="py-0 d-flex align-center font-weight-bold"
                    style="font-size: 15px"
                  >
                    <v-text-field
                      label="待拆分数量"
                      dense
                      hide-details
                      readonly
                      v-model="formData.unPackQty"
                    >
                    </v-text-field>
                  </v-col>
                </v-row>
                <v-row class="ma-0 mb-5">
                  <v-col
                    cols="6"
                    class="py-0 d-flex align-center font-weight-bold"
                    style="font-size: 15px"
                  >
                    <v-text-field
                      autofocus
                      label="包装内数量"
                      class="inputPlaceholder"
                      dense
                      clearable
                      filled
                      hide-details
                      type="number"
                      v-model="formData.packQty"
                      @input="packQtyChange"
                    ></v-text-field>
                  </v-col>
                  <v-col
                    cols="6"
                    class="py-0 d-flex align-center font-weight-bold"
                    style="font-size: 15px"
                  >
                    <v-text-field
                      label="包装个数"
                      class="inputPlaceholder"
                      hint="自动计算"
                      @input="packNumChange"
                      type="number"
                      v-model="formData.number"
                    ></v-text-field>
                  </v-col>
                </v-row>
                <v-row class="ma-0 mb-6">
                  <v-col
                    cols="6"
                    class="py-0 d-flex align-center font-weight-bold"
                    style="font-size: 15px"
                  >
                    <v-text-field
                      label="尾数"
                      readonly
                      v-model="formData.lastQty"
                      hint="自动计算,不支持修改"
                    >
                    </v-text-field>
                  </v-col>
                  <v-col cols="6">
                    <v-checkbox
                      v-model="formData.isLast"
                      label="尾数拆分"
                    ></v-checkbox>
                  </v-col>
                </v-row>
                <v-row class="ma-0 mb-3">
                  <v-col cols="4">
                    <v-btn
                      class="rounded-xl navigationBtns_return"
                      block
                      outlined
                      rounded
                      style="
                        height: 50px;
                        color: #193690 !important;
                        fontcolor: #193690 !important;
                      "
                      @click="reTag"
                      >补打标签</v-btn
                    >
                  </v-col>
                  <v-col cols="8">
                    <v-btn
                      class="rounded-xl navigationBtns_return"
                      block
                      dark
                      style="
                        height: 50px;
                        background-color: #4169e1 !important;
                        fontcolor: #ffff !important;
                      "
                      @click="submit"
                      >提交
                    </v-btn>
                  </v-col>
                </v-row>
              </v-card>
            </v-container>
          </div>
        </v-tab-item>
      </v-tabs>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
    <v-dialog v-model="isConfirmVisible" min-width="330">
      <v-card class="mx-auto" max-width="330">
        <v-card-title class="text-h5">提 示</v-card-title>
        <v-card-text>
          <p></p>
          <div class="text--primary">{{ confirmMsg }}</div>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            class="ma-1"
            text
            color="indigo"
            @click="isConfirmVisible = false"
            >取消</v-btn
          >
          <v-btn
            class="ma-1"
            text
            color="teal"
            @click="submitConfirm()"
            :loading="loading"
            >确认</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "../../components/safeHeader_wms";
import { mdiCreditCardScan } from "@mdi/js";
import _ from "lodash";
import { printToJiaBo } from "@/static/print";
import Storage from "../../utils/storage.js";
import wms from "@/utils/business_wms";
export default {
  name: "PackingMarking",
  components: {
    SafeHeader,
    Root,
  },
  data() {
    return {
      overlay: false,
      loading: false,
      mdiCreditCardScan: mdiCreditCardScan,
      tab: null,

      isConfirmVisible: false,
      formData: {
        itemCode: "",
        itemName: "",
        batchName: "",
        boxCode: "",
        packQty: "", //用于校验,防止超出此数量
        acceptRecordCode: "", // 收货单编码
        unPackQty: "", //  拆分的分数
        number: "", //包装数
        lastQty: "", //尾数
        isLast: true, //是否尾数拆分
      },

      serchData: {
        itemCode: "",
        asnBillNo: "",
        acceptUserId: "",
      },

      acceptList: [], //收货单列表

      confirmMsg: "", //确认的信息
      invList: [], //已拆分回传的库存列表
    };
  },
  methods: {
    /* 查询收货单信息 */
    getAcceptData() {
      this.overlay = true;
      let loginconfig = Storage.getObject("loginConfig");
      this.serchData.acceptUserId = loginconfig.userId;
      // console.log(JSON.stringify(this.serchData))
      wms
        .get({
          url: "/accept/records/pack/list",
          data: this.serchData,
        })
        .then((res) => {
          this.overlay = false;
          if (res.status == 200 && res.data.code == 200) {
            if (res.data.data.total == 0) {
              this.$root.api.api.toast({ msg: "无数据", location: "middle" });
            }
            this.acceptList = res.data.data.list;
            // console.log(this.acceptList);
          } else {
            alert(res.data.message);
          }
        });
    },

    /* 点击拆分，跳转 */
    packing(item) {
      //Tab跳转
      this.tab = 1;

      this.formData.acceptRecordCode = item.acceptRecordCode;
      this.formData.itemCode = item.itemCode;
      this.formData.itemName = item.itemName;
      this.formData.batchName = item.batchName;
      this.formData.unPackQty = item.quantity - item.packedQuantity;
      this.formData.packQty = "";
      this.formData.number = "";
      this.formData.lastQty = "";
    },

    /* 保存绑定容器的数据，放入数组 */
    packQtyChange() {
      let val = this.formData.packQty;
      let this_ = this;
      //校验数据是否齐备
      if (
        !this.formData.itemCode ||
        !this.formData.unPackQty ||
        !this.formData.packQty
      ) {
        return false;
      }
      // 判断是否输入负数
      if (val <= 0) {
        this_.formData.number = "";
        this_.formData.lastQty = "";
        return alert("包装数量不能小于等于0");
      }

      //校验数量是否超过
      if (parseFloat(val) > parseFloat(this.formData.unPackQty)) {
        this_.formData.number = "";
        this_.formData.lastQty = "";
        return alert("超出待拆分数量，请确认");
      }

      this_.formData.number = Math.floor(this_.formData.unPackQty / val);
      this_.formData.lastQty = this_.formData.unPackQty % val;
    },

    packNumChange() {
      let val = this.formData.number;
      let this_ = this;
      //校验数据是否齐备
      if (
        !this_.formData.itemCode ||
        !this_.formData.unPackQty ||
        !this_.formData.packQty
      ) {
        return false;
      }

      // 判断是否输入负数
      if (val <= 0) {
        this_.formData.number = "";
        this_.formData.lastQty = "";
        return alert("包装个数不能小于等于0");
      }

      let totalQty =
        Number(this_.formData.packQty) * Number(this_.formData.number);
      //校验数量是否超过
      if (parseFloat(totalQty) > parseFloat(this.formData.unPackQty)) {
        this_.formData.number = "";
        this_.formData.lastQty = "";
        return alert("超出待拆分数量，请确认");
      }

      this_.formData.lastQty = this_.formData.unPackQty - totalQty;
    },

    /* 提交数据 */
    submit() {
      if (
        !this.formData.unPackQty ||
        !this.formData.packQty ||
        !this.formData.number
      ) {
        alert("请确认数据是否完整");
        return false;
      }

      let totalNum = this.formData.number;
      if (this.formData.isLast && this.formData.lastQty != 0) {
        totalNum++;
      }

      if (totalNum >= 100) {
        alert("拆分数量达到100，数量较多，请确认后继续操作");
      }

      this.confirmMsg =
        "包装内平均数量为 [" +
        this.formData.packQty +
        "] , 拆分的个数为 [" +
        totalNum +
        "] 件!";
      if (this.formData.isLast && this.formData.lastQty != 0) {
        this.confirmMsg =
          this.confirmMsg + "包含尾数[" + this.formData.lastQty + "]件。";
      }
      this.isConfirmVisible = true;
    },

    /* 提交确认 */
    submitConfirm() {
      let params = {
        acceptRecordCode: this.formData.acceptRecordCode,
        packQty: this.formData.packQty,
        number: this.formData.number,
        lastQty: this.formData.lastQty,
        printLast: this.formData.isLast,
      };
      // console.log(JSON.stringify(this.formData));
      // this.overlay = true;
      this.loading = true;
      wms.post({ url: "/pack/split", data: params }).then((res) => {
        if (res.status == 200 && res.data.code == 200) {
          console.log("打印标签" + this.invList)
          this.invList = res.data.data;
          // if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
            //调用打印机打印
            // let printModule = window.api.require("moduleDemo");
            // let printParams = {
            //   mac: localStorage.getItem("uuid"),
            // };
            let list = this.invList;
            // printModule.printConnect(printParams, function (ret) {
            //   window.api.toast({ msg: ret.result, location: "middle" });
            console.log("打印标签" + JSON.stringify(list))
            for (let i = 0; i < list.length; i++) {
              printToJiaBo(
                list[i].itemCode,
                list[i].itemName,
                list[i].batchName,
                list[i].quantity,
                list[i].boxCode
              );
            }
            // });

            this.loading = false;
            this.isConfirmVisible = false;
            Object.keys(this.formData).forEach(
              (key) => (this.formData[key] = "")
            );
            this.formData.isLast = true;
            this.getAcceptData();
            this.tab = 0;
          // } else {
          //   this.overlay = false;
          //   this.isConfirmVisible = false;
          //   setTimeout(function () {
          //     window.location.reload();
          //   }, 200);
          // }
        } else {
          console.log(JSON.stringify(res.data));
          this.overlay = false;
          alert("提交失败：" + res.data.data);
        }
      });
    },

    /**
     * 补打标签
     */
    reTag() {
      let printModule = window.api.require("moduleDemo");
      let printParams = {
        mac: localStorage.getItem("uuid"),
      };
      if (this.invList.length == 0) {
        return false;
      }
      let list = this.invList;
      printModule.printConnect(printParams, function (ret) {
        for (let i = 0; i < list.length; i++) {
          let data = list[i];
          printToJiaBo(
            data.itemCode,
            data.itemCode,
            data.batchName,
            data.quantity,
            data.boxCode
          );
        }
      });

      this.overlay = false;
      this.isConfirmVisible = false;
    },
  },

  mounted() {
    //
    this.getAcceptData();
  },

  watch: {},
};
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  padding-top: 65px;
  width: 100%;
  bottom: 0;
}

.task {
  overflow: auto;
  padding-bottom: 56px;

  &_from {
    background-color: #fff;
    margin-bottom: 6px;

    .v-text-field ::v-deep.v-input__prepend-inner {
      margin-top: 8px;
      display: flex;
      font-size: 0.875rem;
      min-width: 4rem;

      .v-input__append-inner .v-btn {
        padding: 0 10px;
        margin-bottom: 2px;

        .col {
          padding-bottom: 6px;
        }
      }
    }

    &_list .v-card__subtitle .row + .row {
      margin-top: 6px;
      justify-content: flex-end;
      padding-right: 10px;

      .col {
        padding: 6px 8px;
      }
    }
  }
}
</style>

<style lang="sass" scoped>
.scanContainer
  >.row
    margin: 0
    padding: 10px

  .PackingMarking_table
    ::v-deep .v-data-table__mobile-table-row
      margin: 4px 8px
      background-color: #e8e8e8f1
    ::v-deep .v-data-table__mobile-row
      min-height: 28px !important
      // 暂无数据的显示
      ::v-deep .v-data-table__empty-wrapper
        display: flex
        justify-content: center
        align-items: center
        td
          line-height: 48px

  .inputPlaceholder
    ::v-deep.v-text-field__slot
      input::-webkit-input-placeholder
        font-size: 15px
      input::-moz-placeholder
        font-size: 15px
      input:-moz-placeholder
        font-size: 15px
      input:-ms-input-placeholder
        font-size: 15px
</style>
